<!-- home -->
<template>
  <page-view :full="true">
    <page-content class="mine">
      <div class="mi-header">
        <div class="mi-hbox">
          <span class="mi-title">我的</span>
          <img src="../../assets/image/mine/m_talk.png"
               alt=""
               class="mi-talk"
               @click="showPopup">
        </div>
        <div class="mi-av"
             @click="goAccount">
          <img v-if="!user.user_head"
               src="../../assets/image/mine/head.png"
               alt=""
               class="mi-sculp">
          <img v-else
               :src="user.user_head"
               alt=""
               class="mi-sculp">

          <div v-if="user.id"
               class="mi-info">
            <p class="mi-name">{{user.nickname}}</p>
            <p class="mi-phone">{{user.phone | hidePhone}}</p>
          </div>
          <div v-else
               class="mi-info"
               @click="login">
            <span><span>登录<span>/</span>注册</span></span>
          </div>

        </div>
        <div class="mi-list">
          <div class="ml-box"
               @click="goOrder">
            <img src="../../assets/image/mine/m_order.png"
                 alt=""
                 class="m-order">
            <p class="m-word">我的订单</p>
          </div>
          <div class="ml-box"
               @click="goWallet">
            <img src="../../assets/image/mine/m_card.png"
                 alt=""
                 class="m-order">
            <p class="m-word">我的钱包</p>
          </div>
          <div class="ml-box"
               @click="goShare">
            <img src="../../assets/image/mine/m_person.png"
                 alt=""
                 class="m-order">
            <p class="m-word">邀请好友</p>
          </div>

        </div>
      </div>
      <div class="mi-bottom">
        <div class="mi-btc">
          <div class="mi-bd">
            <div>
              <p class="mi-ye">BZZ余额</p>
              <p class="mi-money">{{user.bzz || '0.0000'}}</p>
            </div>
            <van-button round
                        type="info"
                        class="mi-tx"
                        @click="goTransfer('0')">提现</van-button>
          </div>
          <div class="mi-bd">
            <div>
              <p class="mi-ye">XCH余额</p>
              <p class="mi-money">{{user.xch || '0.0000'}}</p>
            </div>
            <van-button round
                        type="info"
                        class="mi-tx"
                        @click="goTransfer('1')">提现</van-button>
          </div>
        </div>
        <div class="mi-det">
          <div class="mi-li"
               @click="goPay">
            <div>
              <img src="../../assets/image/mine/m_cards.png"
                   alt=""
                   class="m_card">
              <span class="mi-save">收/付款设置</span>
            </div>
            <span>
              <van-icon name="arrow"
                        color="#AEADB9"
                        size="14" />
            </span>
          </div>
          <div class="mi-li"
               @click="goFeed">
            <div>
              <img src="../../assets/image/mine/m_cards.png"
                   alt=""
                   class="m_card">
              <span class="mi-save">意见反馈</span>
            </div>
            <span>
              <van-icon name="arrow"
                        color="#AEADB9"
                        size="14" />
            </span>
          </div>
          <div class="mi-li"
               @click="goAbout">
            <div>
              <img src="../../assets/image/mine/m_ciecle.png"
                   alt=""
                   class="m_card">
              <span class="mi-save">关于我们</span>
            </div>
            <span>
              <van-icon name="arrow"
                        color="#AEADB9"
                        size="14" />
            </span>
          </div>
        </div>
      </div>
      <van-popup v-model="show"
                 closeable
                 class="b-show">
        <div class="b-imf">
          <img :src='erUrl'
               alt=""
               class="b-ewm">
          <p class="b-wx">添加矿银所微信客服</p>
          <p class="b-yw">如有疑问，请扫描添加客服微信 随时咨询，</p>
        </div>
      </van-popup>
    </page-content>
  </page-view>
</template>

<script>
import Vue from 'vue';
import { Icon, Popup } from 'vant';
Vue.use(Popup);
Vue.use(Icon);
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import service from '@/utils/request';
export default {
  components: {
    PageView,
    PageContent
  },
  data () {
    return {
      show: false,
      user: {},
      erUrl: '',
    }
  },

  created () {
    this.user = this.$store.state.user || {};
    this.getData();
  },

  methods: {
    getData () {
      return service.post('/apiMy.do', null, {
        hideloading: true
      }).then(res=>{
        this.user = res.data;
        this.$store.dispatch('setUser', this.user);
      })
    },
    login () {
      this.$router.push({
        path: '/login/0',
      })
    },
    //去分享
    goShare () {
      this.$router.push({
        path: '/share',
      })
    },
    //去支付
    goPay () {
      this.$router.push({ path: '/pay' })
    },
    //打开联系客服弹窗 获取二维码
    showPopup () {
      this.show = true;
      return service.post('/apiGetCustomerQrcode.do').then(res => {
        this.erUrl = res.data
      })
    },
    goAbout () {
      this.$router.push({ path: '/about' })
    },
    goFeed () {
      this.$router.push({ path: '/feed' })
    },
    goWallet () {
      this.$router.push({
        path: '/wallet'
      })
    },
    goOrder () {
      this.$router.push({ path: '/order' })
    },
    goAccount () {
      this.$router.push({ path: '/account' })
    },
    goTransfer (id) {
      this.$router.push({ path: `/transfer/${id}` })
    }

  }
}
</script>
<style lang="scss" scoped>
.mine {
  // display: flex;
  // flex-flow: column;
  width: 100vw;
  background: #fff;
  position: relative;
  overflow: auto !important;
  .mi-header {
    height: 260px;
    overflow: hidden;
    padding: 0 20px;
    background: #f2f1f8;
    .mi-hbox {
      width: 100%;
      height: 29px;
      line-height: 29px;
      display: flex;
      justify-content: space-between;
      margin-top: 39px;
      .mi-talk {
        width: 26px;
        height: 26px;
      }
      .mi-title {
        font-size: 21px;
        font-weight: 500;
        color: #000000;
      }
    }
    .mi-av {
      height: 66px;
      margin-top: 15px;
      .mi-sculp {
        width: 66px;
        height: 66px;
        box-sizing: border-box;
        border-radius: 50%;
        margin-right: 17px;
        vertical-align: middle;
      }
      .mi-info {
        display: inline-block;
        height: 40px;
        width: auto;
        vertical-align: middle;
        .mi-name {
          height: 20px;
          font-size: 14px;
          font-weight: 500;
          color: #000000;
          line-height: 20px;
          margin-bottom: 4px;
        }
        .mi-phone {
          height: 14px;
          font-size: 10px;
          font-weight: 400;
          color: #aaa8b5;
        }
      }
    }
    .mi-list {
      height: 73px;
      margin-top: 16px;
      display: flex;
      justify-content: space-between;
      .ml-box {
        width: 104px;
        box-sizing: border-box;
        padding: 10px 8px;
        background: #ffffff;
        border-radius: 13px;
        .m-order {
          width: 32px;
          height: 32px;
          margin-bottom: 2px;
        }
        .m-word {
          height: 20px;
          font-size: 14px;
          font-weight: 400;
          color: #272841;
          line-height: 20px;
        }
      }
    }
  }
  .mi-bottom {
    // flex: 1;
    // height: auto;
    padding: 0 20px 30px;
    overflow: hidden;
    // padding: 15px 23px 20px 23px;
    // overflow: auto;
    .mi-btc {
      height: 168px;
      background: #585df9;
      border-radius: 13px;
      margin-top: 23px;
      box-sizing: border-box;
      padding: 0 18px;
      .mi-bd {
        height: 84px;
        box-sizing: border-box;
        padding-top: 11px;
        border-bottom: 1px solid #787cff;
        display: flex;
        justify-content: space-between;
        .mi-tx {
          width: 80px;
          height: 40px;
          line-height: 40px;
          background: #ffffff;
          border-radius: 21px;
          font-size: 14px;
          font-weight: 400;
          color: #585df9;
          text-align: center;
          margin-top: 10px;
          border: none;
        }
        .mi-ye {
          height: 18px;
          font-size: 13px;
          font-weight: 500;
          color: #caccfc;
          line-height: 18px;
        }
        .mi-money {
          height: 42px;
          font-size: 30px;
          font-weight: 600;
          color: #ffffff;
          line-height: 42px;
        }
      }
    }
    .mi-det {
      height: 150px;
      margin-top: 38px;
      .mi-li {
        height: 50px;
        box-sizing: border-box;
        border-top: 1px solid #eee;
        box-sizing: border-box;
        padding-top: 15px;
        display: flex;
        justify-content: space-between;
        .m_card {
          width: 20px;
          height: 20px;
          // margin-top: 15px;
          margin-right: 17px;
          vertical-align: middle;
        }
        .mi-save {
          font-size: 13px;
          font-weight: 400;
          color: #3d3e54;
          vertical-align: middle;
        }
      }
    }
  }
  .mi-btc:last-child {
    border: 0;
  }
  .mi-det:last-child {
    border-bottom: 1px solid #eee;
  }
  .b-show {
    width: 331px;
    height: 391px;
    background: #ffffff;
    border-radius: 10px;
  }
  .b-imf {
    height: 296px;
    padding: 0 58px;
    margin-top: 62px;
    .b-ewm {
      margin-left: 18px;
      margin-bottom: 14px;
      width: 181px;
      height: 181px;
    }
    .b-wx {
      height: 29px;
      font-size: 21px;
      text-align: center;
      font-weight: 500;
      color: #000000;
      line-height: 29px;
      margin-bottom: 14px;
    }
    .b-yw {
      // height: 40px;
      font-size: 15px;
      line-height: 36px;
      font-weight: 400;
      color: #7a7886;
      line-height: 18px;
      text-align: center;
      line-height: 28px;
    }
  }
}
</style>
